:root {
	// can do sizes later on;
	--menu-width: 200px;
}
.sidebar-header-menu {
	position: absolute;
	width: var(--menu-width);
	padding: 6px;
	border-radius: var(--border-radius-lg);
	background: var(--surface-modal);
	box-shadow: var(--shadow-xl);
	z-index: 1030;
}

.dropdown-menu-item {
	// padding: var(--padding-xs);
	border-radius: var(--border-radius-sm);
	&:hover {
		background-color: var(--sidebar-hover-color);
	}

	a {
		height: 28px;
		padding: 6px 8px 6px 8px;
		gap: 8px;
		text-decoration: none;
		display: flex;
		align-items: center;
		gap: var(--margin-sm);
		.menu-item-icon {
			line-height: 0px;
			.app-logo {
				width: 16px;
				height: 16px;
			}
		}
	}

	.menu-item-title {
		text-overflow: ellipsis;
		text-wrap: nowrap;
		overflow: hidden;
	}
}
